<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Kuscia管理平台登录</title>
	<link rel="stylesheet" th:href="@{/plug/elementPlus/index.css}" />
	<link rel="stylesheet" th:href="@{/base/css/index.css}" />
	<link rel="stylesheet" th:href="@{/plug/antv/x6/index.css}" />
	<script th:src="@{/plug/vue3/vue.global.prod.js}"></script>
	<script th:src="@{/plug/axios/axios.min.js}"></script>
	<script th:src="@{/plug/axios/request.js}"></script>
	<script th:src="@{/plug/elementPlus/index.full.js}"></script>
	<script th:src="@{/plug/elementPlus/index.iife.min.js}"></script>
	<script th:src="@{/plug/antv/x6/index.js}"></script>
	<script th:src="@{/base/js/index.js}"></script>
	<script th:src="@{/base/js/enum.js}"></script>
	<script>
		let that;
	</script>
	<link rel="shortcut icon" th:href="@{/favicon.ico}">
	<style>
		body{
			margin: 0px;
		}
		.login-container {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			overflow-y: auto;
			/**background: url("/img/bg.bb3efba8.png") no-repeat center right;**/
			background: url("/base/img/group.svg") no-repeat center left;
		}
		.login-container .login-card {
			width: 400px;
			background: #ffffff;
			border: none;
			border-radius: 4%;
		}
		.login-form {
			margin-top: 5px;
		}
		.login-form .input-wrapper{
			width: 100%;
		}
	</style>
</head>

<body>
	<div id="appMain" class="login-container" >
		<el-card class="login-card">
			<div class="text-center relative">
				<h2>Kuscia管理平台
					<el-link type="primary" href="https://www.secretflow.org.cn/zh-CN/docs/kuscia/v0.10.0b0/" target="_blank">_v0.10.0b0</el-link>
				</h2>
				<el-tag type="success" class="ml-2 absolute-rt">默认登录：carro/123456</el-tag>
			</div>

			<el-form ref="loginFormRef" :model="loginData" :rules="loginRules" class="login-form">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<div class="input-wrapper">
						<el-input ref="username" v-model="loginData.username" name="username" size="large" />
					</div>
				</el-form-item>

				<!-- 密码 -->
				<el-form-item prop="password">
					<div class="input-wrapper">
						<el-input v-model="loginData.password" type="password" name="password" show-password />
					</div>
				</el-form-item>

				<!-- 登录按钮 -->
				<div style="display: flex; justify-content: space-between;">
					<el-link type="primary" href="/register">创建账号</el-link>
					<el-button :loading="loading" type="primary" size="large" @click.prevent="handleLoginSubmit">
						登录系统
					</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</body>
<script type="text/javascript">
	const _data = {
		loginData: {
			username: '',
			password: ''
		},
		loginRules: {
			username: [
				{
					required: true,
					trigger: "blur",
					message: '请输入账号',
				},
			],
			password: [
				{
					required: true,
					trigger: "blur",
					message: '请输入密码',
				},
			],
		}
	}
	const _method = {
		handleLoginSubmit() {
			let that = this
			that.$refs["loginFormRef"].validate((valid) => {
				if (valid) {
					let loading = that.$loading()
					postRequst('/login', that.loginData, true).then(function (resp) {
						loading.close()
						if (resp.status == 0) {
							that.$message({message: resp.msg, type: "success"});
							setTimeout(function () {
								window.location.href = resp.data.redirect
							}, 500)
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		}
	}
	function _created() {
		this.$nextTick(() => {
			document.querySelector('body').style.height = window.innerHeight*1 + 'px';
		})
	}
</script>
<script th:src="@{/base/js/VueCreate.js}"></script>

</html>